<template>
	<view class="content">
		<view>
			<!-- <video id="myVideo" :src="curCourse.video_url"></video> -->
			<view class="player-wrap">
				<view class="player">
					<polyv-player  :id="player_id" :playerId="playerId" :vid="videoInfo.vid" :width="width"  :viewerInfo="viewerInfo" :showControls="true"   :autoplay="true" :showProgressBar="true"  isAllowSeek="no"
					 :ts="videoInfo.ts" :sign="videoInfo.sign" :marqueeConfig="marqueeConfig" @statechange="statechange" @timeupdate="timeupdate" @error="error">
					</polyv-player>
			<!-- 		<button @click="seek">跳转到 30 s</button>
					<button @click="getCurrentTime">获取当前播放时间</button>
					<button @click="changeVid">切换视频</button> -->
				</view>
			</view>
		</view>
		<view>
			<uni-segmented-control :current="current" :values="items"  @clickItem="onClickItem" />
		</view>
		<view class="show">
			<view v-show="current === 0">
				<view class="live_list" v-for="(item,index) in coursekc" :key="index" @click="chooseCourse(item)">
					<text class="iconfont icon-shipin"></text>{{item.title}}
				</view>
			</view>
			<view v-show="current === 1">
				<view class="p10">	
					<comment :contentId="nav_id"></comment>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import comment from '@/components/comment';
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import {mapState} from 'vuex';
	export default{
		components: {
			comment,
			uniSegmentedControl,
		},
		data() {
			return {
				player_id: 'polyvPlayer',
				playerId: 'polyvPlayer',
				videoInfo: {},//播放视频所需参数
				
				width: '100%',
				height: '100%',
				viewerInfo: { // 自定义观众信息
				 
				},
				marqueeConfig: {
				  text: '',
				  fontColor: '#ccc'
				},
				polyvPlayerContext: '',
				
				
				comment:true,
				items: [
					'目录',
					'评论'
				],
				current: 0,
				exhibitionList:[],
				content:{},
				id: 0,
				liveList: [],
				title:"电商架构演变之路",
				
				
				coursekc: [],
				nav_id: '',//课程id
				curCourse: {},//当前选择的课程
				detail: {},
				
			};
		},
		onLoad(option) {
			console.log('视频播放',option);
			if(!option){
				
				return false;
			}
			this.nav_id = option.id;
			// this.curCourse = option;
			
			if(!this.$mHelper.checkBindPhone()){
				return false;
			}
			this.loadData();
			
			
			/* this.loadData();
			uni.setNavigationBarTitle({
				title: "电商架构演变之路"
			}); */
			
			this.initPlay();
			this.getVideoParams(this.nav_id);
			
		},
		onShow(){
			
			// this.doOnLogin();
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			doOnLogin(){
				if(!this.hasLogin){
					uni.showModal({
						title: "提示",
						content: "您还没有登录，请先登录？",
						showCancel: true,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({  
									url: '/pages/user/login'  
								})
							} else if (res.cancel) {
								uni.switchTab({  
									url: '/pages/index/index'  
								})
							}
						}
					});
					return ;
				}
			},
			
			/* async loadData() {
				let liveList = await this.$api.json('liveList');
				this.liveList = liveList;
			}, */
			async loadData() {
				/* let coursekc = await this.$api.json('coursekc');
				this.coursekc = coursekc; */
				await this.$http.post('api/live/livedetail',{id: this.nav_id}).then(res=>{
					if(res.code === this.sucCode){
						this.detail = res.data.data || {};
						this.coursekc = this.detail.type || [];
						uni.setNavigationBarTitle({
							title: this.detail.title
						});
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			
			
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
		
			chooseCourse(item){
				let t = this;
				console.log('更换课程',item);
				this.nav_id = item.id;
				uni.setNavigationBarTitle({
					title: item.title
				});
				this.getVideoParams(item.id);
				/* 
				this.course = this.content.courses[index];
				if(this.course.isFree){
					this.check = true;
				}else{
					this.check = false;
					this.$api.memberGet('/course/check',{courseId: this.course.id}).then(r=>{
						if(r.data.body == 'true'){
							this.check = true;
						}else{
						}
					})
				} */
			},
			
			/**
			 * 播放视频
			 */
			initPlay(){
				// #ifdef MP-WEIXIN
				// 组件ID: id 设置为 'polyvPlayer'，所以下面写成 '#polyvPlayer'
				this.polyvPlayerContext = this.selectComponent('#polyvPlayer');
				// this.polyvPlayerContext = this.$scope.selectComponent('#polyvPlayer'); // 通过插件的自定义组件ID获取
				console.log('初始化播放视频',this.$scope.selectComponent('#polyvPlayer'),this.polyvPlayerContext);
				// this.polyvPlayerContext.play();  // 播放
				// #endif
			},
			play(){
				if(!this.polyvPlayerContext){
					this.polyvPlayerContext = this.selectComponent('#polyvPlayer');
				}
				let t = this;
				t.polyvPlayerContext.play(); 
				
				
				
			},
			statechange(e) {
				console.log('播放状态变更',e);
				
			},
			timeupdate(e) {
				/* console.log('播放进度变化');
				console.log(e.detail); */
			},
			error(e) {
				console.log('视频播放出错',e);
				
			},
			seek() {
				this.polyvPlayerContext.seek(30);
			},
			getCurrentTime() {
				console.log(this.polyvPlayerContext.getCurrentTime());
			},
			
			/**
			 * 通过播放的课程id获取保利威直播参数
			 */
			async getVideoParams(sectionId){
				// let sectionId = this.curCourse.course_id;//课程小节id
				if(!sectionId){
					this.$mHelper.toast('课程小节不存在！');
					return false;
				}
				if(this.loading){
					
					return false;
				}
				this.loading = true;
				await this.$http.post('api/common/livevideo',{id: sectionId}).then(res=>{
					this.loading = false;
					if(res.code === this.sucCode){
						let _data = res.data || {};
						
						this.videoInfo = res.data || {}; 
						
						this.play();
						uni.setNavigationBarTitle({
							title: this.videoInfo.title
						});
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
					this.loading = false;
				})
				
			},
			
			
			
		}
		
	}
</script>
<style>
page{background: #fff;}
video {width: 100%;}
.live_list{ border-bottom:#eee solid 1px; font-size: 32upx;padding: 20upx 40upx;}
.live_list .iconfont{color: #666;padding-right: 15upx;}


.player-wrap {
		position: relative;
		width: 100%;
		height: 600rpx ;
		/* padding-bottom: 56.25%; */
	}
	
	.player {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>
